<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Recommended Movies</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		
		<style>
			body {
				padding-top: 60px;
				/* 60px to make the container go all the way to the bottom of the topbar */
			}
		</style>
	</head>
	
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="brand" href="#">RentDVD</a>
					<ul class="nav">
						<li><a href="catalog.jsp">Movie Catalog</a></li>
						<li class="active"><a href="#">Recommend Movie</a></li>
						<li><a href="history.jsp">History</a></li>
					</ul>
					<ul class="nav pull-right">
						<li><button class="btn btn-danger" onclick="logout();">Logout</button></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="container">
			<h3>Please enter your location</h3>
			<form id="locationForm" action="javascript:getRecommendedMovies();">
				<input type="text" id="city" placeholder="City"/></br>
				<button class="btn btn-primary" type="submit" id="submitButton" class="btn">Submit</button>
			</form>
			
			<div class="container">
				<div id="movieTable"></div>
			</div>
		</div>
		
		<script>
			function StringtoXML(text) {
				if (window.ActiveXObject) {
					$doc = new ActiveXObject('Microsoft.XMLDOM');
					$doc.async = 'false';
					$doc.loadXML(text);
				} else {
					var parser = new DOMParser();
					$doc = parser.parseFromString(text, 'text/xml');
				}
				
				return $doc;
			}
			
			function loadXMLDoc(dname) {
				if (window.XMLHttpRequest) {
					xhttp = new XMLHttpRequest();
				} else {
					xhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				xhttp.open("GET", dname, false);
				xhttp.send("");
				return StringtoXML(xhttp.response);
			}
			
			function getRecommendedMovies() {
				xsl = loadXMLDoc("movies.xsl");
				xml = loadXMLDoc("/RentDVDsClient/movie?recommend&city=" + $("#city").val());
				// code for IE
				if (window.ActiveXObject) {
					ex = xml.transformNode(xsl);
					document.getElementById("movieTable").innerHTML = ex;
				} else if (document.implementation && document.implementation.createDocument) {
					// code for Mozilla, Firefox, Opera, etc.
					xsltProcessor = new XSLTProcessor();
					xsltProcessor.importStylesheet(xsl);
					resultDocument = xsltProcessor.transformToFragment(xml, document);
					var table = $("#movieTable");
					
					table.html('<h2>Recommended Movies</h2>');
					table.append(resultDocument);
					table.append("<button class='btn btn-large btn-primary pull-right' id='rentMovies'>Rent DVDs</button>");
				}
			};
			
			$(".btn").live("click", function() {
				$this = $(this);
				if ($this.hasClass("btn-info")) {
					$this.removeClass("btn-info");
					$this.addClass("btn-success");
				} else if ($this.hasClass("btn-success")) {
					$this.removeClass("btn-success");
					$this.addClass("btn-info");
				}
			});
			
			$("#rentMovies").live("click", function() {
				var idList = "";
				$.each($(".btn-success"), function(key, cur) {
					idList += $(this).attr("filmId") + ",";
				});
				
				if(idList.length == 0){
					alert('Please select a movie to rent!');
					return;
				}
				
				$.ajax({
					url : "/RentDVDsClient/rent",
					type : "POST",
					data : {data : idList},
					success : function (data) {
						alert("Movie(s) successfully rented!");
						location.reload();
					},
					error : function(data) {
						alert("Error while renting movie(s)!");
					}
				});
			});
			
			function logout() {
				var form = document.createElement('form');
				form.setAttribute('method', 'post');
				form.setAttribute('action', 'logout');
				form.style.display = 'hidden';
				document.body.appendChild(form);
				form.submit();
			}
		</script>
	</body>
</html>